<template>
  <div class="course">
    <search-list
      :api-url="$url.AssetCourseList"
      :option="searchOpt"
      :itemPerRow="4"
      :before-query="beforeQuery"
      @selection-change="selectionChange"
      ref="courseSearchList"
      @row-click="(row) => $emit('single-select', row)"
    >
      <el-table-column label="合集名称" prop="title"></el-table-column>
      <el-table-column label="合集信息" width="270">
        <template slot-scope="scope">
          <div class="cover-text">
            <img class="cover-img" v-if="scope.row.cover" :src="scope.row.cover" />
            <div>
              <!-- <p>标题: {{ scope.row.title }}</p> -->
              <p>ID: {{ scope.row.courseId }}</p>
              <!-- <p>视频所属频道: {{ scope.row.channelId }}</p> -->
              <!-- <p>合集主创人: {{ scope.row.userId }}</p> -->
              <p>
                <el-button
                  type="primary"
                  icon="el-icon-document"
                  @click.stop="window.open(`https://ke.movtile.com/cover/${scope.row.courseId}`)"
                >
                  合集详情
                </el-button>
                <el-button
                  type="success"
                  icon="el-icon-position"
                  @click.stop="window.open(`https://ke.movtile.com/c/${scope.row.courseId}`)"
                >
                  合集播放
                </el-button>
              </p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="合集类别" prop="categoryName" max-width="150"></el-table-column>
      <el-table-column label="付费类型" prop="payMode" width="100px">
        <template slot-scope="scope">
          {{ $selectFormat['paySl'](scope.row.payMode).label }}
        </template>
      </el-table-column>
      <el-table-column label="是否上线/精编" prop="online" width="100">
        <template slot-scope="scope">
          <el-tag
            effect="dark"
            :type="['danger', 'success', 'info'][scope.row.online]"
            v-if="$selectFormat['onlineSl'](scope.row.online)"
          >
            {{ $selectFormat['onlineSl'](scope.row.online).label }}
          </el-tag>
          <el-tag
            effect="dark"
            :type="['danger', 'success'][scope.row.precised]"
            v-if="$selectFormat['precisedSl'](scope.row.precised)"
          >
            {{ $selectFormat['precisedSl'](scope.row.precised).label }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="合集等级">
        <template slot-scope="scope">
          <div>
            {{ $selectFormat['courseLevelSl'](scope.row.level).label }}
          </div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="审核状态">
        <template slot-scope="scope">
          <div>
            {{ $selectFormat['courseStatusSl'](scope.row.checked).label }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="在线状态">
        <template slot-scope="scope">
          <div>
            {{ $selectFormat['onlineSl'](scope.row.online).label }}
          </div>
        </template>
      </el-table-column> -->

      <el-table-column prop="createdAt" label="创建/更新时间" min-width="120px">
        <template slot-scope="scope">
          <div>
            <p>创建时间: {{ scope.row.createdAt }}</p>
            <p>更新时间: {{ scope.row.updatedAt }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="payPrice" label="价格" min-width="120px">
        <template slot-scope="scope">{{ scope.row.payPrice }}元</template>
      </el-table-column>
      <el-table-column prop="nickname" label="讲师" width="80px"></el-table-column>
      <el-table-column label="操作" width="280px" v-if="!selectMode">
        <template slot-scope="scope">
          <div>
            <el-button type="text" v-permission="['course:save']" @click="check(scope.row)">
              去编辑
            </el-button>
            <el-button
              type="primary"
              v-permission="['course:add']"
              @click="$tabs.open({ name: 'MediaUpload', params: { id: scope.row.id } })"
            >
              增加视频
            </el-button>
            <el-button
              v-permission="['course:del']"
              type="danger"
              icon="el-icon-close"
              @click="del(scope.row)"
            >
              删除合集
            </el-button>
          </div>
        </template>
      </el-table-column>

      <div slot="btn-after" class="btn-after">
        <el-button type="success" icon="el-icon-plus" v-permission="['course:add']" @click="add">
          新增合集
        </el-button>
      </div>
    </search-list>
  </div>
</template>

<script>
  export default {
    props: {
      selectMode: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        selectedData: [],
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'courseId',
            label: '合集ID',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '合集标题',
          },
          // TODO:
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'categoryName',
            label: '分类',
          },
          {
            type: 'onlineSl',
            name: 'online',
            label: '上线状态',
          },
          {
            type: 'precisedSl',
            name: 'precised',
            label: '精编状态	',
          },
          {
            type: 'paySl',
            name: 'payMode',
            label: '全部付费类型',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'nickname',
            label: '讲师',
          },
        ],
      };
    },
    methods: {
      /**
       * 管理
       */
      check(row) {
        const { id } = row;
        this.$tabs.open({ name: 'CourseDetail', params: { id } });
      },
      /**
       * 新增
       */
      add() {
        this.$tabs.open({ name: 'CourseDetail' });
        this.$emit('add');
      },
      /**
       * 删除
       */
      del(row) {
        this.$confirm('确认要删除这个合集吗?删了就没有了', '', {
          type: 'error',
        }).then((res) => {
          this.$service
            .AssetCourseDelete({
              courseId: row.id,
            })
            .then((res) => {
              this.$refs.courseSearchList.getList();
              this.$message.success('操作成功');
            });
        });
      },
      /**
       * 选择数据回调
       */
      selectionChange(val) {
        this.selectedData = [...val];
      },
      // 筛选之前
      beforeQuery(val) {
        const { searchInfo } = val;
        if (searchInfo.categoryName) {
          let temp = searchInfo.categoryName.split('-');
          searchInfo.categoryName = temp[temp.length - 1];
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  .course {
    .course-cover {
      max-width: 200px;
      max-height: 300px;
    }

    /deep/ .el-table__row {
      cursor: pointer;
    }
  }
</style>
